<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
<head>
    <title>注册</title>
    <div th:replace="~{fragments/head-base}"></div>
</head>
<body class="body sidebar-left-hidden fixedNav_position fixedMenu_left ">
<div class="preloader" style=" position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 100000;
  backface-visibility: hidden;
  background: #ffffff;">
    <div class="preloader_img" style="width: 200px;
  height: 200px;
  position: absolute;
  left: 48%;
  top: 48%;
  background-position: center;
z-index: 999999">
        <img th:src="@{/img/loader.gif}" style=" width: 50px;" alt="loading...">
    </div>
</div>
<!--wrap-->
<div id="wrap">
    <div th:replace="~{fragments/top :: top}"></div>
    <!-- /#top -->
    <div class="wrapper fixedNav_top">
        <div th:replace="~{fragments/left :: left}"></div>
        <!-- /#left -->
        <div id="content" class="bg-container">
            <div class="outer">
                <div class="inner bg-container">
                    <div class="row">
                        <div style="margin: 0 auto">
                            <div class=" m-t-35 signin_wid" style="width: 400px">
                                <!-- <div class="card-header bg-white">
                                     登录
                                 </div>-->
                                <div >
                                    <!-- logo -->
                                    <div class="m-t-30 text-center">
                                        <img src="img/loginLogo.png" style="width: 120px"/>
                                        <h3 class="mt-4">加入 -   一起探索吧！</h3>
                                    </div>
                                    <form class="mt-3">
                                        <fieldset>
                                            <div class="form-group row">
                                                <div class="col-lg-12 user_icon_change2">
                                                    <div class="input-group">
                                                            <span class="input-group-addon">
                                                                <i class="fa fa-envelope"></i>
                                                            </span>
                                                        <input type="email" maxlength="30" class="form-control "
                                                              id="email" name="email" placeholder="邮箱">
                                                    </div>
                                                </div>
                                            </div>
                                            <div>
                                                这是注册账号的第一步。首先，你需要提供你的 Email
                                                地址。然后，会向你填写的邮箱里面投入一封验证邮件。根据验证邮件的提示再进行下一步操作。
                                            </div>
                                            <div class="row mt-2">
                                                <div class="col-6">
                                                    <input id="imageCode" name="imageCode" maxlength="4" placeholder="验证码"
                                                           class="w-50 form-control float-right"/>
                                                </div>
                                                <div class="col-6">
                                                    <img th:src="@{/validate/code}" id="imageCodeImg"
                                                         class="float-left mt-1"
                                                         onclick="this.src = 'validate/code?time='+new Date().getTime()"/>
                                                </div>
                                            </div>
                                            <div class="form-group row mt-3">
                                                <div class="col-lg-8" style="margin: 0 auto">
                                                    <a href="javascript:void(0)" onclick="send()" id = "sendEmail"class="btn btn-danger text-white btn-lg glow_button w-100">发送验证邮件</a>
                                                </div>
                                            </div>
                                        </fieldset>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- /.inner -->
    </div>
    <!-- /.outer -->
    <!-- /#content -->
    <!-- Modal -->
    <div class="modal fade" id="search_modal" tabindex="-1" role="dialog" aria-hidden="true">
        <form th:action="@{/problem/problemList}" method="post">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span class="float-right" aria-hidden="true">&times;</span>
                    </button>
                    <div class="input-group search_bar_small">
                        <input type="text" class="form-control" placeholder="题目搜索" name="keyword">
                        <span class="input-group-btn">
                          <button class="btn btn-secondary" type="submit"><i class="fa fa-search"></i></button>
                        </span>
                    </div>
                </div>
            </div>
        </form>
    </div>
    <!-- /#content -->
    <!-- # right side -->
</div>
<!-- /#wrap -->
<!-- global scripts-->
<div th:replace="~{fragments/footer :: footer}"></div>
<!--end of global scripts-->
<!--  plugin scripts -->
<script th:src="@{/js/pages/register.js}"></script>
<!--end of plugin scripts-->
</body>

</html>
